import React, { useState } from 'react';
import { MapPin, Mail, Phone, Send, CheckCircle } from 'lucide-react';
export function Contact() {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const [formSubmitted, setFormSubmitted] = useState(false);
  const [formError, setFormError] = useState(false);
  const handleChange = e => {
    const {
      name,
      value
    } = e.target;
    setFormState({
      ...formState,
      [name]: value
    });
  };
  const handleSubmit = e => {
    e.preventDefault();
    // Simple validation
    if (!formState.name || !formState.email || !formState.message) {
      setFormError(true);
      return;
    }
    // In a real app, you would send the form data to a server here
    // For this demo, we'll just simulate a successful submission
    setTimeout(() => {
      setFormSubmitted(true);
      setFormError(false);
      setFormState({
        name: '',
        email: '',
        subject: '',
        message: ''
      });
    }, 1000);
  };
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative py-24 bg-carbon-black">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1499363536502-87642509e31b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Mountain landscape" className="w-full h-full object-cover opacity-30" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1 className="font-display text-4xl md:text-6xl mb-6">
              GET IN TOUCH
            </h1>
            <p className="text-xl text-gray-300">
              Have questions about our gear reviews? Want to collaborate or join
              our testing team? We'd love to hear from you.
            </p>
          </div>
        </div>
      </section>
      {/* Contact Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* Contact Form */}
            <div className="lg:col-span-2">
              <h2 className="font-display text-3xl md:text-4xl mb-8">
                SEND US A MESSAGE
              </h2>
              {formSubmitted ? <div className="bg-forest-green/20 border border-forest-green rounded-lg p-8 text-center">
                  <CheckCircle size={48} className="mx-auto mb-4 text-forest-green" />
                  <h3 className="text-2xl font-display mb-2">
                    Message Sent Successfully!
                  </h3>
                  <p className="text-gray-300 mb-4">
                    Thank you for reaching out. Our team will get back to you as
                    soon as possible.
                  </p>
                  <button onClick={() => setFormSubmitted(false)} className="bg-forest-green hover:bg-forest-green/80 text-white px-6 py-2 rounded transition-colors">
                    Send Another Message
                  </button>
                </div> : <form onSubmit={handleSubmit} className="space-y-6">
                  {formError && <div className="bg-climbing-red/20 border border-climbing-red rounded-lg p-4">
                      <p className="text-climbing-red">
                        Please fill out all required fields.
                      </p>
                    </div>}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label htmlFor="name" className="block mb-2 font-bold">
                        Your Name <span className="text-climbing-red">*</span>
                      </label>
                      <input type="text" id="name" name="name" value={formState.name} onChange={handleChange} className="w-full bg-carbon-black border border-gray-700 rounded px-4 py-3 focus:outline-none focus:border-outdoor-orange" required />
                    </div>
                    <div>
                      <label htmlFor="email" className="block mb-2 font-bold">
                        Your Email <span className="text-climbing-red">*</span>
                      </label>
                      <input type="email" id="email" name="email" value={formState.email} onChange={handleChange} className="w-full bg-carbon-black border border-gray-700 rounded px-4 py-3 focus:outline-none focus:border-outdoor-orange" required />
                    </div>
                  </div>
                  <div>
                    <label htmlFor="subject" className="block mb-2 font-bold">
                      Subject
                    </label>
                    <input type="text" id="subject" name="subject" value={formState.subject} onChange={handleChange} className="w-full bg-carbon-black border border-gray-700 rounded px-4 py-3 focus:outline-none focus:border-outdoor-orange" />
                  </div>
                  <div>
                    <label htmlFor="message" className="block mb-2 font-bold">
                      Message <span className="text-climbing-red">*</span>
                    </label>
                    <textarea id="message" name="message" value={formState.message} onChange={handleChange} rows={6} className="w-full bg-carbon-black border border-gray-700 rounded px-4 py-3 focus:outline-none focus:border-outdoor-orange" required />
                  </div>
                  <div>
                    <button type="submit" className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-8 py-3 rounded transition-colors inline-flex items-center">
                      SEND MESSAGE
                      <Send size={18} className="ml-2" />
                    </button>
                  </div>
                </form>}
            </div>
            {/* Contact Information */}
            <div>
              <h2 className="font-display text-3xl md:text-4xl mb-8">
                CONTACT INFO
              </h2>
              <div className="bg-carbon-black rounded-lg p-6 mb-8">
                <div className="space-y-6">
                  <div className="flex">
                    <div className="mr-4">
                      <div className="bg-outdoor-orange p-3 rounded-full">
                        <MapPin size={24} />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-xl mb-2">Our Location</h3>
                      <p className="text-gray-300">
                        123 Adventure Way
                        <br />
                        Boulder, CO 80302
                        <br />
                        United States
                      </p>
                    </div>
                  </div>
                  <div className="flex">
                    <div className="mr-4">
                      <div className="bg-outdoor-orange p-3 rounded-full">
                        <Mail size={24} />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-xl mb-2">Email Us</h3>
                      <a href="mailto:info@opengohub.com" className="text-outdoor-orange hover:underline">
                        info@opengohub.com
                      </a>
                      <p className="text-gray-300 mt-1">
                        For press inquiries:{' '}
                        <a href="mailto:press@opengohub.com" className="text-outdoor-orange hover:underline">
                          press@opengohub.com
                        </a>
                      </p>
                    </div>
                  </div>
                  <div className="flex">
                    <div className="mr-4">
                      <div className="bg-outdoor-orange p-3 rounded-full">
                        <Phone size={24} />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-bold text-xl mb-2">Call Us</h3>
                      <p className="text-gray-300">
                        +1 (800) 123-4567
                        <br />
                        Mon-Fri: 9:00 AM - 5:00 PM MT
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-carbon-black rounded-lg p-6">
                <h3 className="font-bold text-xl mb-4">Connect With Us</h3>
                <p className="text-gray-300 mb-6">
                  Follow us on social media for the latest gear reviews,
                  adventure tips, and behind-the-scenes content.
                </p>
                <div className="flex space-x-4">
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange p-3 rounded-full transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                    </svg>
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange p-3 rounded-full transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                    </svg>
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange p-3 rounded-full transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                    </svg>
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange p-3 rounded-full transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
                      <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Map Section */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8 text-center">
            FIND US
          </h2>
          <div className="relative h-[400px] rounded-lg overflow-hidden">
            <img src="https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Map of Boulder, Colorado" className="w-full h-full object-cover" />
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
              <div className="bg-outdoor-orange p-3 rounded-full animate-pulse">
                <MapPin size={32} />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>;
}